<%@ page contentType="text/html;charset=UTF-8" %>
  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <html>

    <head>
      <title>地址选择测试页面</title>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <style>
        .form-group {
          margin-bottom: 15px;
        }

        .form-label {
          display: inline-block;
          width: 100px;
          text-align: right;
          margin-right: 10px;
        }

        .form-select {
          width: 120px;
          margin-right: 10px;
          padding: 5px;
          border: 1px solid #ddd;
          border-radius: 3px;
        }

        .container {
          padding: 20px;
          max-width: 800px;
          margin: 0 auto;
        }

        h2 {
          color: #333;
          margin-bottom: 20px;
        }
      </style>
    </head>

    <body>
      <div class="container">
        <h2>地址选择功能测试</h2>

        <div class="form-group">
          <label class="form-label">所在地：</label>
          <select class="form-select" id="select_address_province">
            <option value="">请选择省</option>
            <option value="110000">北京市</option>
            <option value="120000">天津市</option>
            <option value="130000">河北省</option>
            <option value="140000">山西省</option>
            <option value="150000">内蒙古自治区</option>
            <option value="210000">辽宁省</option>
            <option value="220000">吉林省</option>
            <option value="230000">黑龙江省</option>
            <option value="310000">上海市</option>
            <option value="320000">江苏省</option>
            <option value="330000">浙江省</option>
            <option value="340000">安徽省</option>
            <option value="350000">福建省</option>
            <option value="360000">江西省</option>
            <option value="370000">山东省</option>
            <option value="410000">河南省</option>
            <option value="420000">湖北省</option>
            <option value="430000">湖南省</option>
            <option value="440000">广东省</option>
            <option value="450000">广西壮族自治区</option>
            <option value="460000">海南省</option>
            <option value="500000">重庆市</option>
            <option value="510000">四川省</option>
            <option value="520000">贵州省</option>
            <option value="530000">云南省</option>
            <option value="540000">西藏自治区</option>
            <option value="610000">陕西省</option>
            <option value="620000">甘肃省</option>
            <option value="630000">青海省</option>
            <option value="640000">宁夏回族自治区</option>
            <option value="650000">新疆维吾尔自治区</option>
          </select>
          <select class="form-select" id="select_address_city">
            <option value="">请选择市</option>
          </select>
          <select class="form-select" id="select_address_district">
            <option value="">请选择区/县</option>
          </select>
        </div>

        <div id="debug_info" style="margin-top: 20px; padding: 10px; background: #f5f5f5; border-radius: 3px;">
          <h3>调试信息：</h3>
          <div id="debug_content">请选择省份来测试地址联动功能</div>
        </div>
      </div>

      <script>
        $(function () {
          // 省份变化事件
          $("#select_address_province").change(function () {
            var provinceId = $(this).val();
            var provinceName = $(this).find("option:selected").text();

            $("#debug_content").html("选择了省份: " + provinceName + " (ID: " + provinceId + ")");

            if (provinceId) {
              $.ajax({
                type: "GET",
                url: "/tmall/address/" + provinceId,
                dataType: "json",
                success: function (data) {
                  $("#debug_content").append("<br>API调用成功，返回数据: " + JSON.stringify(data));

                  if (data.success) {
                    $("#select_address_city").empty().append('<option value="">请选择市</option>');
                    $("#select_address_district").empty().append('<option value="">请选择区/县</option>');

                    // 填充市级选项
                    if (data.addressList && data.addressList.length > 0) {
                      for (var i = 0; i < data.addressList.length; i++) {
                        var address_id = data.addressList[i].address_areaId;
                        var address_name = data.addressList[i].address_name;
                        $("#select_address_city").append("<option value='" + address_id + "'>" + address_name + "</option>");
                      }
                      $("#debug_content").append("<br>成功加载 " + data.addressList.length + " 个城市");
                    }

                    // 如果有孙级地址，填充区县选项
                    if (data.childAddressList && data.childAddressList.length > 0) {
                      for (var j = 0; j < data.childAddressList.length; j++) {
                        var childAddress_id = data.childAddressList[j].address_areaId;
                        var childAddress_name = data.childAddressList[j].address_name;
                        $("#select_address_district").append("<option value='" + childAddress_id + "'>" + childAddress_name + "</option>");
                      }
                      $("#debug_content").append("<br>成功加载 " + data.childAddressList.length + " 个区县");
                    }
                  } else {
                    $("#debug_content").append("<br>API返回失败: " + (data.message || "未知错误"));
                    alert("加载地区信息失败，请刷新页面再试！");
                  }
                },
                error: function (xhr, status, error) {
                  $("#debug_content").append("<br>API调用失败: " + error);
                  alert("加载地区信息失败，请刷新页面再试！");
                }
              });
            } else {
              $("#select_address_city").empty().append('<option value="">请选择市</option>');
              $("#select_address_district").empty().append('<option value="">请选择区/县</option>');
            }
          });

          // 城市变化事件
          $("#select_address_city").change(function () {
            var cityId = $(this).val();
            var cityName = $(this).find("option:selected").text();

            $("#debug_content").append("<br>选择了城市: " + cityName + " (ID: " + cityId + ")");

            if (cityId) {
              $.ajax({
                type: "GET",
                url: "/tmall/address/" + cityId,
                dataType: "json",
                success: function (data) {
                  $("#debug_content").append("<br>城市API调用成功，返回数据: " + JSON.stringify(data));

                  if (data.success) {
                    $("#select_address_district").empty().append('<option value="">请选择区/县</option>');
                    if (data.addressList && data.addressList.length > 0) {
                      for (var i = 0; i < data.addressList.length; i++) {
                        var address_id = data.addressList[i].address_areaId;
                        var address_name = data.addressList[i].address_name;
                        $("#select_address_district").append("<option value='" + address_id + "'>" + address_name + "</option>");
                      }
                      $("#debug_content").append("<br>成功加载 " + data.addressList.length + " 个区县");
                    }
                  } else {
                    $("#debug_content").append("<br>城市API返回失败: " + (data.message || "未知错误"));
                    alert("加载地区信息失败，请刷新页面再试！");
                  }
                },
                error: function (xhr, status, error) {
                  $("#debug_content").append("<br>城市API调用失败: " + error);
                  alert("加载地区信息失败，请刷新页面再试！");
                }
              });
            }
          });

          // 区县变化事件
          $("#select_address_district").change(function () {
            var districtId = $(this).val();
            var districtName = $(this).find("option:selected").text();
            $("#debug_content").append("<br>选择了区县: " + districtName + " (ID: " + districtId + ")");
          });
        });
      </script>
    </body>

    </html>